<template>
    <div class = "SubmitProblem">
        <div v-show = "submitState" class = "textinput-container">
            <MyTextarea
            @change = "contentChange" 
            :styles = "{width: '680',height: '500'}" 
            place = "请输入提问的内容"
            maxInput = "500"/>
        </div>
        <div class = "voice" v-show = "!submitState">
            <p class = "icon">
                <template v-if = "host">
                    <img  v-if = "isVoice" :src = " host + '/images/voice_stop.png'" alt="" @click = "stopRecorder">
                    <img  v-else :src = " host + '/images/voice_start.png'" alt="" @click = "startRecorder">
                </template>
            </p>
            <p class = "desc">点击录音</p>
            <p class = "upload">上传录音</p>
        </div>
        <div class = "overt">
            <MyRadio
            @change = "overtChange"
            color = "#707070"
            activeColor = "#DB4723" 
            size = "35"/>
            <span>是否公开</span>
        </div>
        <div :class = "content ? 'submit-button active' : 'submit-button'">提交</div>
        <div class = "tab-button" @click = "submitStateChange">切换<span v-if = "submitState">语音</span><span v-else>文本</span>提问</div>
    </div>
</template>
<script>
import MyTextarea from "./components/MyTextaea";
import MyRadio from "../../components/MyRadio";
import HOST from "../../config/host";

export default {
    data(){
        return {
            submitState: true, //true文本提交 false 语音提交
            content: "",
            overtState: false,
            host: HOST,
            isVoice: false,
            recorderManager: null,
            audioManager: null,
            voiceSrc: ""
        }
    },
    onReady(){
        this.recorderManager = wx.getRecorderManager();
        this.audioManager = wx.createInnerAudioContext();
        this.init();
    },
    components: {
        MyTextarea,
        MyRadio
    },
    methods: {
        init(){
            this.recorderManager.onStart(()=>{
            console.log("当前开始了录音");
            });
            this.recorderManager.onStop(res=>{
                console.log("当前结束了录音");
                this.voiceSrc = res.tempFilePath;
                this.audioManager.src = encodeURI(this.voiceSrc);
                this.audioManager.autoplay = true;
            })
            this.recorderManager.onError(err=>console.log("当前错误信息",err));
        },
        startRecorder: function(){
            //定义录音配置
            const options = {
                  duration: 10000,//指定录音的时长，单位 ms
                  sampleRate: 16000,//采样率
                  numberOfChannels: 1,//录音通道数
                  encodeBitRate: 96000,//编码码率
                  format: 'mp3',//音频格式，有效值 aac/mp3
                  frameSize: 50,//指定帧大小，单位 KB
                }
            return function(){
                this.isVoice = true;   
                this.recorderManager.start(options);
            }
        }(),
        stopRecorder(){
            this.isVoice = false;  
            this.recorderManager.stop();
        },
        //提交状态改变事件
        submitStateChange(){
            this.submitState = !this.submitState;
        },
        //内容输入事件
        contentChange(con){
            this.content = con;
        },
        //单选框状态改变事件
        overtChange(state){
            this.overtState = state;
        }
    }
}
</script>
<style lang = "scss" scoped>
    @import "index.scss";
</style>
